<template>
  <div v-if="upload">
    <div>
      <Upload ref="upload"
              :before-upload="beforeUpload"
              :show-upload-list="true"
              :max-size="10240"
              multiple
              type="drag"
              :action="fileUrl">
        <div style="padding: 10px">
          <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
          <p>点击将文件拖拽到这里上传</p>
          <span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>
        </div>
      </Upload>
    </div>
    <div v-show="files.length>0" v-for="(item,index) in files" :key='index'>
      <a @click="downloadFiles(item)">{{ item.fileName }}</a>
      <Button type="text" icon="md-trash" @click="remove(item.id)"
              style="margin-left: 5px;margin-bottom: 3px"/>
      <Progress v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
    </div>
  </div>
  <div v-else>
    <div v-show="files.length>0" v-for="(item,index) in files">
      <a @click="downloadFiles(item)"><span style="color: #3399ff;margin-left: 5px">{{
          item.fileName
        }}</span></a>
      <Progress v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
    </div>
  </div>
</template>
<script>
import {Api} from "@/api";

export default {
  name: "fileView",
  props: {
    upload: {
      type: Boolean,
      default: true,
    },
    id: {
      type: String,
    },
    uri: {
      type: String,
      default: "",
    }
  },
  data() {
    return {
      fileUrl: Api.interestedPartiesUserFile,
      files: [],
      uploadListVisible: [],
      uploadListPercent: [],
    }
  },
  methods: {
    remove(id) {
      let url = this.fileUrl + '/file/' + id;
      this.$http.delete(url).then((res) => {
        this.getFiles()
      })
    },
    beforeUpload(file) {
      let formData = new FormData();
      formData.append("files", file); // 文件对象
      let url = this.fileUrl + '/' + this.id + '/files/' + this.uri
      this.$http.post(url, formData).then((res) => {
        if (res.data.result == "success") {
          this.$Message.info("文件上传成功")
          this.getFiles();
        }
      })
      return false
    },
    getFiles() {
      let _this = this;
      let url = this.fileUrl + '/' + this.id + '/files/' + this.uri
      this.$http.get(url).then((res) => {
        if (res.data.result == "success") {
          _this.files = res.data.data
          let index = 0;
          res.data.data.forEach(item => {
            _this.uploadListPercent[index] = 0;
            _this.uploadListVisible[index] = false;
            _this.uploadListVisible[item.id] = false;
            index++;
          })
        }
      })
    },
    downloadFiles(file) {
      let url = this.fileUrl + '/file/' + file.id;
      this.$http.get(url, {
        responseType: 'blob'      //告诉服务器我们需要的响应格式
      }).then((res) => {
        const aLink = document.createElement("a");
        let blob = new Blob([res.data], {
          type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
        });
        aLink.href = URL.createObjectURL(blob)
        aLink.download = file.fileName //标题
        aLink.click()
        document.body.appendChild(aLink)
      })
    },
  },
  watch: {
    id(newVal, oldVal) {
      if (this.id) {
        this.getFiles();
      }
    },
  }
}
</script>

<style scoped>

</style>
